<template>
    <div class="goods-list">
        <!-- <el-row>
            商品列表
        </el-row> -->

        <el-table class="table-list" :data="list" border style="width: 100%"  >
            <!-- <el-table-column prop="proid" label="编号" width="180">
            </el-table-column> -->
            <el-table-column prop="proname" label="商品名称" width="250">
            </el-table-column>
            <el-table-column prop="originprice" label="原价" width="180">
            </el-table-column>
            <el-table-column prop="currentprice" label="现价" width="180">
                <!-- v-slot='slotScope'  slotScope = {row,col,$index} -->
                <!-- 可以在当前列中有选择的渲染一部分内容 -->
                <template v-slot="{row}">
                    <span v-if="row.discount!= 10" >{{ row.originprice * row.discount / 10 }}  </span>
                    <span v-else>暂无折扣</span>
                </template>
            </el-table-column>
            <el-table-column prop="img1" label="图片" width="180">
                <template v-slot="{row}">
                    <!-- <img width="50" :src="row.img1" alt=""> -->
                    <el-image 
                    style="width:50px"
                    :src="row.img1" 
                    :preview-src-list="[row.img1,row.img2,row.img3,row.img4]">
                </el-image>
                </template>
            </el-table-column>
            <el-table-column label="推荐状态" width="180">
                <template v-slot="{row}">
                    <el-switch
                        v-model="row.isrecommend"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        :active-value="1"
                        :inactive-value="0">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="秒杀状态" width="180">
                <template v-slot="{row}">
                    <el-switch
                        v-model="row.isseckill"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        :active-value="1"
                        :inactive-value="0">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template v-slot="">
                    <el-button>查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row >
            <el-pagination 
                class="page-box"
                :page-count="8"
                :page-sizes="[5,10,15,20,50]"
                :page-size.sync = "pageParams.limitNum"
                :current-page.sync = "pageParams.count"
                layout="prev, pager, next, total, sizes, jumper"
                prev-text="上一页"
                next-text="下一页"
                background
                @size-change="sizeChangeHandler"
                @current-change="currentChangeHandler"
                :total="total">
            </el-pagination>
        </el-row>
    </div>
</template>

<script>
import { getProListAPI } from '@/api/goods';
export default {
    name: "GoodsListView",
    data() {
        return {
            list: [],
            total:0,
            pageParams: {
                count: 1,
                limitNum: 5,
            }
        }
    },
    methods: {
        getProList() {
            getProListAPI(this.pageParams).then(res => {
                console.log("商品列表请求成功", res);
                this.list = res.data;
                this.total = res.total;
            }).catch(err => {
                this.$message({
                    message: err.message,
                    type: "error",
                })
            })
        },
        sizeChangeHandler(val){
            console.log("sizeChange",val);
            this.pageParams.limitNum = val;
        },
        currentChangeHandler(page){
            console.log("currentChangeHandler",page);
            this.pageParams.page = page;
        }
    },
    watch:{
        pageParams:{
            handler:function(){
                this.getProList();
            },
            deep:true,
        }
    },
    mounted() {
        this.getProList();
    }
}
</script>

<style lang="scss" scoped>
    .page-box{
        margin-top: 10px;
        margin-right: 50px;
        float: right;
    }
    ::v-deep .table-list .el-table__header .el-table__cell{
        text-align: center;
    }
    ::v-deep .table-list .el-table__body .el-table__cell{
        text-align: center;
    }
</style>